<script setup lang="ts">
// @ts-nocheck
import { Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
// import { useAdvert } from "@/components/Advertisement/useAdvert";
import { nanoid } from "nanoid";

withDefaults(
  defineProps<{
    list?: any[];
  }>(),
  {
    list: () => []
  }
);

const waterfallRef = ref<any>(null);
// const newsAdert = useAdvert("120X240", 0);
// const videoAdert = useAdvert("120X240", 1);

const emit = defineEmits(["clickItem"]);

const key = ref(nanoid(16));

onActivated(() => {
  key.value = nanoid(16);
  setTimeout(() => {
    unref(waterfallRef)?.renderer();
  }, 2000);
});

const clickItem = (item: any) => {
  emit("clickItem", item);
};
const innerWidth = window.innerWidth;
</script>

<template>
  <Waterfall
    ref="waterfallRef"
    :list="list"
    :gutter="16"
    :hasAroundGutter="true"
    :animationCancel="true"
    :lazyload="true"
    :breakpoints="{
      [innerWidth]: { rowPerView: 2 }
    }"
  >
    <!-- 新版插槽数据获取 -->
    <template #default="{ item, url, index }">
      <div :class="['card']" @click="clickItem(item)">
        <template v-if="item.type === 'advert'">
          <!-- <div class="center h-full w-full google-ads-style">
            <Advertisement
              v-bind="item.source === 'news' ? newsAdert : videoAdert"
              :key="key"
              isEffectLayout
              @refreshLayout="waterfallRef && waterfallRef.renderer()"
            />
          </div> -->
        </template>
        <template v-else>
          <van-image
            :src="url"
            :width="item.imgWidth"
            :height="item.imgHeight"
            :class="['relative', item.type == 'video' ? 'video-card' : '']"
            @load="item.type == 'video' && (item.loaded = true)"
            fit="cover"
          >
            <div
              class="absolute top-50% left-50% translate-[-50%]"
              v-if="item.type == 'video' && item.loaded"
            >
              <svg-icon class="text-30" name="play" />
            </div>
          </van-image>

          <div class="py-6 px-4">
            <div
              class="text-[#444] text-12 line-height-14 font-400 text-ellipsis-2"
            >
              {{ item.title }}
            </div>
            <div class="text-[#999] text-10 line-height-12 mt-4 h-16 truncate">
              {{ item.time }} . <span>{{ item.author }}</span>
            </div>
          </div>
        </template>
      </div>
    </template>
  </Waterfall>
</template>

<style lang="less" scoped>
.card {
  background: #ffffff;
  box-shadow: 0px 2px 5px 1px rgba(159, 159, 159, 0.23);
  border-radius: 8px 8px 8px 8px;
  ::v-deep(.van-image__img) {
    border-radius: 8px 8px 0px 0px;
  }
  .video-card {
    ::v-deep(img) {
      min-height: 120px;
    }
    color: red;
    &:has(.van-image__error) {
      height: 120px !important;
    }
  }
}
</style>
